<template>
  <div class="continuous-limitup-ladder">
    <div class="app-checkbox basic-bgColor">
      <div class="checkbox-group">
        <Radio :checked="checkedGroup[0]" @change="handleChecked('HS', 0)" />
        <div class="checkbox-title basic-text">沪深(除创/科)</div>
        <Radio :checked="checkedGroup[1]" @change="handleChecked('GEM2STAR', 1)" />
        <div class="checkbox-title basic-text">创/科</div>
        <div class="checkbox-popup" @click="handlePopupClik()">
          <div
            :class="{
              'checkbox-popup-name': true,
              'basic-text-head': !popupShow,
              'basic-text-rise-red': popupShow,
            }"
          >
            筛选
          </div>
          <div class="popup-open" :class="{ 'popup-close': popupShow }"></div>
        </div>
      </div>
      <div></div>
    </div>
    <VPopup class="vp basic-text" :isShow="popupShow" @overLayClick="handleClickOverLay">
      <div class="checkbox-group">
        <div class="checkbox-box bottom24">
          <div class="checkbox-title basic-text">显示ST</div>
          <Radio :checked="checkedGroup[2]" @change="handleChecked('ST', 2)" />
        </div>
      </div>
    </VPopup>

    <LinkBoardLadder v-if="show" :id="id" :filterConcatText="filterConcatText" :nowDate="nowDate" />
  </div>
</template>

<script>
import VPopup from './components/vPopup/index.vue';
import Radio from './components/radio/index.vue';
import LinkBoardLadder from './components/linkBoardLadder/index.vue';

// atom-ui 引入
import '@atom/atom-ui/lib/loading/style';
import { Toast } from '@atom/atom-ui';

import dayjs from 'dayjs';

export default {
  name: 'ContinuousLimitupLadder',

  props: {
    // 调用组件的业务 id（可为业务定制化需求）
    id: {
      type: String,
      default: '',
    },

    // 默认是今天，可以传日期进来，格式：YYYYMMDD
    nowDate: {
      type: String,
      default: dayjs().format('YYYYMMDD'),
    },
  },

  components: {
    Radio,
    Toast,
    VPopup,
    LinkBoardLadder,
  },

  data() {
    return {
      checkedGroup: ['HS', 'GEM2STAR', '', ''],
      popupShow: false,
      show: false,
      filterConcatText: 'HS,GEM2STAR',
    };
  },

  methods: {
    handleChecked(name, index) {
      const group = JSON.parse(JSON.stringify(this.checkedGroup));
      if (group[index]) {
        group[index] = '';
      } else {
        group[index] = name;
      }

      if (!group[0] && !group[1]) {
        Toast('至少选中一项');
      } else {
        const filter = [];
        group.forEach(item => {
          if (item) {
            filter.push(item);
          }
        });
        this.filterConcatText = filter.join(',');
        this.checkedGroup = group;

        if (index === 2 || index === 3) {
          this.popupShow = !this.popupShow;
        }
      }
    },

    handlePopupClik() {
      this.popupShow = !this.popupShow;
    },

    handleClickOverLay() {
      this.popupShow = false;
    },
  },
  mounted() {
    this.show = true;
  },
};
</script>

<style lang="less">
.continuous-limitup-ladder {
  position: relative;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.84);
  .app-checkbox {
    padding: 0 4px 16px;
    font-size: 28px;
    .checkbox-group {
      margin: 0 28px;
      display: flex;
      align-items: center;
      position: relative;
      .checkbox-title {
        display: inline-block;
        margin-left: 8px;
        margin-right: 32px;
      }
      .checkbox-popup {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        .checkbox-popup-name {
          display: inline-block;
          margin-right: 4px;
        }
        .popup-open {
          width: 24px;
          height: 24px;
          background: url('./images/icon_list_open2.svg') no-repeat;
          // background-position: center;
          background-size: 100%;
        }
        .popup-close {
          width: 24px;
          height: 24px;
          background: url('./images/icon_list_fewer2.svg') no-repeat;
          // background-position: center;
          background-size: 100%;
        }
      }
    }
  }
  .vp {
    position: absolute;
    top: 42px;
    z-index: 190;
    .checkbox-group {
      .checkbox-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 32px;
        .checkbox-title {
          display: inline-block;
          font-size: 28px;
          color: rgba(0, 0, 0, 0.84);
          font-weight: 400;
        }
      }
      .bottom24 {
        padding-bottom: 24px;
      }
    }
  }
}

.dark {
  .continuous-limitup-ladder {
    margin: 0 28px;
    background-color: #1c1c1c;
    color: rgba(255, 255, 255, 0.84);
    .app-checkbox {
      padding: 0 4px 16px;
      .checkbox-group {
        .checkbox-popup {
          .popup-open {
            width: 24px;
            height: 24px;
            background: url('./images/icon_list_open2_black.svg') no-repeat;
            // background-position: center;
            background-size: 100%;
          }
          .popup-close {
            width: 24px;
            height: 24px;
            background: url('./images/icon_list_fewer2_black.svg') no-repeat;
            // background-position: center;
            background-size: 100%;
          }
        }
      }
    }
  }
}
</style>
